<template>
	<view class="status-badge" :class="[`status-${type}`, { 'badge-large': large }]">
		<text class="badge-text">{{ text }}</text>
	</view>
</template>

<script>
	export default {
		name: 'StatusBadge',
		props: {
			// 显示文本
			text: {
				type: String,
				required: true
			},
			// 状态类型
			type: {
				type: String,
				default: 'default',
				validator: (value) => {
					return ['default', 'success', 'warning', 'error', 'info', 'primary'].includes(value)
				}
			},
			// 是否为大尺寸
			large: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: $spacing-xs $spacing-sm;
	border-radius: $border-radius-sm;
	font-size: $font-size-xs;
	font-weight: 500;
	
	&.badge-large {
		padding: $spacing-sm $spacing-md;
		font-size: $font-size-sm;
	}
	
	// 默认样式
	&.status-default {
		background: $gray-100;
		color: $text-secondary;
	}
	
	// 成功状态
	&.status-success {
		background: rgba(82, 196, 26, 0.1);
		color: $success-color;
	}
	
	// 警告状态
	&.status-warning {
		background: rgba(250, 173, 20, 0.1);
		color: $warning-color;
	}
	
	// 错误状态
	&.status-error {
		background: rgba(255, 77, 79, 0.1);
		color: $error-color;
	}
	
	// 信息状态
	&.status-info {
		background: rgba(24, 144, 255, 0.1);
		color: $info-color;
	}
	
	// 主要状态
	&.status-primary {
		background: $primary-color;
		color: $text-white;
	}
}

.badge-text {
	font-size: inherit;
	color: inherit;
	white-space: nowrap;
}
</style>